<template>

<!-- 导航栏 -->
<van-nav-bar
    :title="TypeName"
    left-text="返回"
    left-arrow
    fixed
    placeholder
    z-index="1000"
    @click-left="back"
    @click-right="SearchShow = true"
>
<template #right>
    <van-icon name="search" size="20" />
</template>
</van-nav-bar>

<!-- 下拉菜单 -->
<van-dropdown-menu :offset-top="46 ">
    <van-dropdown-item @change="TypeToggle" v-model="TypeActive" :options="TypeList" />
    <van-dropdown-item @change="FlagToggle" v-model="FlagActive" :options="FlagList" />
    <van-dropdown-item @change="SortToggle" v-model="SortActive" :options="SortList" />
    <van-dropdown-item @change="ByToggle" v-model="ByActive" :options="ByList" />
</van-dropdown-menu>

<!-- 搜索框 -->
<van-popup v-model:show="SearchShow" position="top">
    <van-search v-model="keywords" placeholder="请输入关键词" @search="search"/>
</van-popup>

<!-- 下拉刷新 -->
<van-pull-refresh v-model="refreshing" @refresh="refresh">
  <!-- 加载列表 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    :offset="10"
    :immediate-check="false"
    finished-text="没有更多了"
    @load="load"
  >
    <ul class="proul" v-if="list">
      <li v-for="(item,key) in list" :key="key">
        <router-link :to="{path: '/product/info', query: {proid: item.id}}">
          <van-image
            width="100%"
            height="190"
            :src="item.thumbs_text"
          />
        </router-link>

        <router-link :to="{path: '/product/info', query: {proid: item.id}}">
          <p class="tit">{{item.name}}</p>
        </router-link>
        <div class="price">
          <p>￥{{item.price}} / {{item.unit_text}}<span>￥8999</span></p>
        </div>     
      </li>
    </ul>
  </van-list>
</van-pull-refresh>

<!-- 返回顶部 -->
<van-back-top />

</template>

<script setup>
    import { Search } from 'vant';

    const {proxy} = getCurrentInstance()

    let TypeList = reactive([
      {text: '全部分类', value: '0'},
    ]);

    let FlagList = [
      {text: '全部商品', value: '0'},
      {text: '新品', value: '1'},
      {text: '热销', value: '2'},
      {text: '推荐', value: '3'},
    ];

    let SortList = [
      {text: '按上架时间', value: 'createtime'},
      {text: '按价格', value: 'price'},
      {text: '按库存', value: 'stock'}
    ];

    let ByList = [
      {text: '降序', value: 'desc'},
      {text: '升序', value: 'asc'},
    ];

    let TypeActive = ref('0')
    let FlagActive = ref('0')  //标志 1-新品 2-热销 3-推荐
    let SortActive = ref('createtime') //排序 上架时间 价格 库存
    let ByActive = ref('desc')  //desc 降序 asc 升序
    let SearchShow = ref(false) //搜索框的显示
    let keywords = ref('') //搜索关键词
    let TypeName = ref('全部分类') //标题栏上面的分类名称

    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新

    
    //生命周期
    onBeforeMount(async() => {
      type()
      load()
    })

    const type = async () => {
      var result = await proxy.$POST({
        url: '/product/type'
      })

      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }

      result.data.map(item => {
        TypeList.push({text: item.name,value: item.id})
      })
    }

    //返回上一页
    const back = () => proxy.$router.go(-1)

    //搜索事件
    const search = async () => 
    {
      SearchShow.value = false
      refreshing.value = true

      //触发刷新效果
      refresh()
    }

    //分类切换
    const TypeToggle = async (value) =>
    {
      refreshing.value = true
      TypeActive.value = value
      refresh()
    }

    //属性切换
    const FlagToggle = async (value) =>
    {
      refreshing.value = true
      FlagActive.value = value
      refresh()
    }

    //排序切换
    const SortToggle = async (value) =>
    {
      refreshing.value = true
      SortActive.value = value
      refresh()
    }

    //升降序切换
    const ByToggle = async (value) =>
    {
      refreshing.value = true
      ByActive.value = value
      refresh()
    }

    //下拉刷新
    const refresh = async () =>
    {
        //可以去掉定时器
        setTimeout(() => {
          //清空查询参数
          page.value = 1
          list.value = []
          finished.value = false
          loading.value = true

          //加载数据方法
          load()
        }, 1000)
    }

    const load = async () =>
    {
      //如果刷新状态已经为true，就要修改为false
      if(refreshing.value)
      {
        refreshing.value = false
      }

      //组装数据
      var params = {
        typeid: TypeActive.value,
        flag: FlagActive.value,
        sort: SortActive.value,
        by: ByActive.value,
        keywords: keywords.value,
        page:page.value
      }

      //发送请求
      var result = await proxy.$POST({
        url: '/product/index',
        params
      })

      //请求发送完，加载状态也完了
      loading.value = false

      if(result.code == 0)
      {
        finished.value = true
        return;
      }

      TypeName.value = result.data.TypeName

      list.value = list.value.concat(result.data.list)
      page.value++
    } 
</script>